﻿// _________________________ css 3 函数 _________________________
// ====================================== *** 圆角 *** ======================================
.border-radius(@radius:5px){-webkit-border-radius:@radius;-moz-border-radius:@radius;-o-border-radius:@radius;border-radius:@radius}
// ====================================== *** 阴影 *** ======================================
.box-shadow(@shadow){-webkit-box-shadow:@shadow;-moz-box-shadow:@shadow;-o-box-shadow:@shadow;box-shadow:@shadow} // 盒子阴影
.text-shadow(@shadow){-webkit-text-shadow:@shadow;-moz-text-shadow:@shadow;-o-text-shadow:@shadow;text-shadow:@shadow} // 文字阴影
// ====================================== *** 变形 *** ======================================
// 旋转
.rotate(@rotate:0){-webkit-transform:rotate(@rotate);-moz-transform:rotate(@rotate);-o-transform:rotate(@rotate);transform:rotate(@rotate)}
.rotateX(@rotate:0){-webkit-transform:rotateX(@rotate);-moz-transform:rotateX(@rotate);-o-transform:rotateX(@rotate);transform:rotateX(@rotate)}
.rotateY(@rotate:0){-webkit-transform:rotateY(@rotate);-moz-transform:rotateY(@rotate);-o-transform:rotateY(@rotate);transform:rotateY(@rotate)}
// 缩放
.scale(@scaleX:0,@scaleY:0){-webkit-transform:scale(@scaleX,@scaleY);-moz-transform:scale(@scaleX,@scaleY);-o-transform:scale(@scaleX,@scaleY);transform:scale(@scaleX,@scaleY)}
.scaleX(@scaleX:0){-webkit-transform:scale(@scaleX);-moz-transform:scale(@scaleX);-o-transform:scale(@scaleX);transform:scale(@scaleX)}
.scaleY(@scaleY:0){-webkit-transform:scale(@scaleY);-moz-transform:scale(@scaleY);-o-transform:scale(@scaleY);transform:scale(@scaleY)}
// 坐标定位
.translate(@x:0,@y:0){-webkit-transform:translate(@x,@y);-moz-transform:translate(@x,@y);-o-transform:translate(@x,@y);transform:translate(@x,@y)}
// 倾斜
.skew(@skewX:0,@skewY:0){-webkit-transform:skew(@skewX,@skewY);-moz-transform:skew(@skewX,@skewY);-o-transform:skew(@skewX,@skewY);transform:skew(@skewX,@skewY)}
// 矩阵变形
.matrix(@a:0,@b:0,@c:0,@d:0,@e:0,@f:0){-webkit-transform:matrix(@a,@b,@c,@d,@e,@f);-moz-transform:matrix(@a,@b,@c,@d,@e,@f);-o-transform:matrix(@a,@b,@c,@d,@e,@f);transform:matrix(@a,@b,@c,@d,@e,@f)}
// 组合式变形
.transform(@transform){
	-webkit-transform:@transform;
	   -moz-transform:@transform;
	     -o-transform:@transform;
	        transform:@transform;
}
// ====================================== *** 设置元素被查看位置的视图 *** ======================================
.perspective(@value:0){perspective:@value;-webit-perspaective:@value}
// ====================================== *** 过渡 *** ======================================
.transition(@transition:all 1s .001s linear){-webkit-transition:@transition;-moz-transition:@transition;transition:@transition}
// ====================================== *** 动画 *** ======================================
.animation(@animation:myame 2s .001s linear both){-webkit-animation:@animation;-moz-animation:@animation;animation:@animation}
// ====================================== *** 渐变 *** ======================================
.gradient(@startColor:#8fa1ff,@endColor:#3757fa,@moz-dir:top,@ie-type:0,@kit-start:left top,@kit-end:left bottom,@kit-type:linear,@kit-start-site:0,@kit-end-site:1){
    background: -webkit-linear-gradient(@moz-dir,@startColor,@endColor);
    background:    -moz-linear-gradient(@moz-dir,@startColor,@endColor);
    background:      -o-linear-gradient(@moz-dir,@startColor,@endColor);
	background: -webkit-gradient(@kit-type, @kit-start, @kit-end, color-stop(@kit-start-site, @startColor), color-stop(@kit-end-site, @endColor));
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor, endColorstr=@endColor, GradientType=@ie-type);
}
// ====================================== *** 模糊 *** ======================================
.filter(@blur:2px,@grayscale:1,@opacity:0.5){
	-webkit-filter:blur(@blur) grayscale(@grayscale);
	   -moz-filter:blur(@blur) grayscale(@grayscale);
	        filter:blur(@blur) grayscale(@grayscale);
			opacity:@opacity
}
// ====================================== *** 关联属性 *** ======================================
// 变形原点
.to(@origin){-webkit-transform-origin:@origin;-moz-transform-origin:@origin;transform-origin:@origin}
// 透视原点
.po(@origin){-webkit-perspective-origin:@origin;-moz-perspective-origin:@origin;perspective-origin:@origin}
// 隐藏内容的背面
.bv(@v:hidden){-webkit-backface-visibility:@v;-moz-backface-visibility:@v;backface-visibility:@v}
// 呈现 3D
.d3(@d3:preserve-3d){-webkit-transform-style:@d3;moz-transform-style:@d3;transform-style:@d3}





